<template>
  <div class="dingdan">
        <div class="dingdan_top">
            <i> < </i>
            <span>订单</span>
        </div>

        <div class="img">
            <img src="../assets/image/dingdan.gif">
        </div>
        <p class="dingdan_p">登陆后查看订单</p>
        <button>立即登录</button>
      <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from "@/components/myfooter";

export default {
  name: "dingdan",
  data() {
    return {};
  },
  components: {
    myFooter
  }
};
</script>

<style lang="less">
.pxToRem(@p, @px) {
  @{p}: @px / 75px * 1rem;
}
.dingdan_top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  color: #fff;
  .pxToRem(line-height,100);
  background: #2395ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  i {
    .pxToRem(font-size,50);
  }
  span {
    .pxToRem(font-size,40);
    position: absolute;
    top: 0;
    left: 45%;
    font-weight: 900;
  }
}

.img{
    width: 100%;
    img{
        width: 100%;
    }
}
.dingdan_p{
    text-align: center;
    .pxToRem(line-height,150);
    .pxToRem(font-size, 60);
    color:#666;
}
button{
    position: absolute;
    left: 32%;
    border: none;
    .pxToRem(width, 300);
    .pxToRem(height, 60);
    margin-bottom:100px;
    border-radius: 5px;
    background: #56d176;
    color: #fff;
}
</style>
